<template>
  <div class="detailTask">
    <header-nav :leftArrow="true" :titelText="'案件详情'"></header-nav>
    <div class="detail">
      <div class="infoBox">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>案件信息</div>
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="left">案件来源</div>
            <div class="right">
              {{ detailForm.sourceName }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.otherSource">
            <div class="left">其他来源</div>
            <div class="right">
              {{ detailForm.otherSource }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">案由</div>
            <div class="right">
              {{ changeCaseActionName(detailForm.caseActionName) }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">简要案情</div>
            <div class="right">
              {{ detailForm.caseBrief }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.sourceName !== '其他'">
            <div class="left">关联任务</div>
            <div class="right right1" @click="gotoTaskDetail">
              查看任务
            </div>
          </div>
        </div>
      </div>

      <div class="infoBox">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>当事人信息</div>
          </div>
          <div class="title-right">
            {{
      detailForm.placeInfo?.partyType == 0
        ? '自然人'
        : detailForm.placeInfo?.partyType == 1
          ? '法人'
          : detailForm.placeInfo?.partyType == 2
            ? '个体工商户'
            : detailForm.placeInfo?.partyType == 3
              ? '非法人组织'
              : ''
    }}
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="left">
              {{
        detailForm.placeInfo?.partyType == 0
          ? '姓名'
          : detailForm.placeInfo?.partyType == 2
            ? '字号名称'
            : '单位名称'
      }}
            </div>
            <div class="right">
              {{ detailForm.placeInfo?.placeName }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">性别</div>
            <div class="right">
              {{
      detailForm.placeInfo?.sex == 1
        ? '男'
        : detailForm.placeInfo?.sex == 2
          ? '女'
          : ''
    }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">出生日期</div>
            <div class="right">
              {{ detailForm.placeInfo?.birthDate }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 0 ||
        detailForm.placeInfo?.partyType == 2
        ? '联系电话'
        : '单位联系电话'
    }}
            </div>
            <div class="right">
              {{ detailForm.placeInfo?.contactsTel }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 0">
            <div class="left">证件类型</div>
            <div class="right">
              {{ detailForm.placeInfo?.idTypeName }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 0
        ? '证件号码'
        : '社会统一信用代码'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.idCode }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 1
        ? '法人'
        : detailForm.placeInfo?.partyType == 3
          ? '负责人'
          : '经营者姓名'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.headName }}</div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType == 1 ||
      detailForm.placeInfo?.partyType == 3
      ">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 1
        ? '法人电话'
        : '负责人电话'
    }}
            </div>
            <div class="right">{{ detailForm.placeInfo?.headTel }}</div>
          </div>
          <div class="infoItem">
            <div class="left">
              {{
      detailForm.placeInfo?.partyType == 0 ? '住址' : '注册地址'
    }}
            </div>
            <div class="right">
              {{
        detailForm.placeInfo?.registerCity +
        detailForm.placeInfo?.registerCounty +
        detailForm.placeInfo?.registerTown +
        detailForm.placeInfo?.registerAddress
      }}
            </div>
          </div>
          <div class="infoItem" v-if="detailForm.placeInfo?.partyType != 0">
            <div class="left">经营地址</div>
            <div class="right">
              {{
      detailForm.placeInfo?.operateCity +
      detailForm.placeInfo?.operateCounty +
      detailForm.placeInfo?.operateTown +
      detailForm.placeInfo?.operateAddress
    }}
            </div>
          </div>
        </div>
      </div>

      <div class="infoBox" v-if="detailForm.resultFileUrl">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>检查结果表</div>
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="ws-left">
              <img src="../../assets/images/wsYes.png" alt="" />
              <div>检查结果表.doc</div>
            </div>
            <div class="ws-right" @click="viewFile(detailForm.resultFileUrl)">
              查看
            </div>
          </div>
        </div>
      </div>

      <div class="infoBox">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>立案信息</div>
          </div>
        </div>
        <div class="info">
          <div class="infoItem">
            <div class="left">立案意见</div>
            <div class="right">
              {{ detailForm.opinion }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">执法机构</div>
            <div class="right">
              {{ detailForm.agencyName }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">主办人</div>
            <div class="right">
              {{ detailForm.sponsor }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">协办人</div>
            <div class="right">
              {{ detailForm.organizer }}
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="infoBox" v-if="detailForm.registerList != ''">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>审批信息</div>
          </div>
        </div>
        <div class="info" v-for="(item, index) in detailForm.registerList" :key="index">
          <div class="infoItem">
            <div class="left">审批负责人</div>
            <div class="right">
              {{ item.approveName }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">审批时间</div>
            <div class="right">
              {{ item.approveTime }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">审批结果</div>
            <div class="right">
              {{
                item.nodeStatus == 1
        ? '待审批':
      item.nodeStatus == 2
        ? '已同意'
        : item.nodeStatus == 3
          ? '不同意'
          : ''
              }}
            </div>
          </div>
          <div class="infoItem">
            <div class="left">审批意见</div>
            <div class="right">
              {{ item.approveOpinions }}
            </div>
          </div>
        </div>
      </div> -->

      <div class="infoBox" v-if="detailForm.registerList?.length > 0">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>审批信息</div>
          </div>
        </div>
        <van-steps direction="vertical" :active="active2" v-if="detailForm.registerList.length > 0">
          <van-step v-for="(item, index) in detailForm.registerList" :key="index">
            <div class="setpBox">
              <div class="setpBox-title">
                <div class="title1">{{ item.flowNodeName }}</div>
                <div class="tag1" :class="item.nodeStatus == 1
      ? 'orige'
      : item.nodeStatus == 2
        ? 'green'
        : item.nodeStatus == 3
          ? 'red'
          : ''
      ">
                  {{
      item.nodeStatus == 1
        ? '待审批'
        : item.nodeStatus == 2
          ? '已同意'
          : item.nodeStatus == 3
            ? '不同意'
            : ''
    }}
                </div>
              </div>
              <div class="setpBox-con">
                <div class="top">
                  <div class="topName">{{ item.approveName }}</div>
                  <div class="topTime">{{ item.approveTime }}</div>
                </div>
                <div class="bot">
                  {{ item.approveOpinions }}
                </div>
              </div>
            </div>
          </van-step>
        </van-steps>
        <div class="empty" v-else>
          <img src="../../assets/images/empty2.png" alt="" />
          <div>暂无审批数据</div>
        </div>
        <div class="margin-bottom-20"></div>
      </div>

      <div class="infoBox" v-if="detailForm.fileInfoList && detailForm.fileInfoList.length > 0">
        <div class="title">
          <div class="title-left">
            <div class="titleIcon"></div>
            <div>处罚信息</div>
          </div>
        </div>

        <div class="info">
          <div class="infoItem">
            <div class="left">处罚金额</div>
            <div class="right">
              {{ detailForm.penaltyAmount }}元
            </div>
          </div>
        </div>

        <div class="info">
          <div class="infoItem" v-for="item in detailForm.fileInfoList">
            <div class="ws-left">
              <img src="../../assets/images/wsYes.png" alt="" />
              <div>{{ item.fileName }}</div>
            </div>
            <div class="ws-right" @click="viewFile(item.newFileUrl)">
              查看
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="detail">
import { imgUrlToBase64 } from '../../util/util'
const { useRegister, usePublic } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const detailForm = ref({})

const active2 = ref([])

const sign1 = ref('')
const sign2 = ref('')
const sign3 = ref('')
const signFlag = ref(0)
const signPicker = ref(false)
const goSign = (val) => {
  signFlag.value = val
  signPicker.value = true
}

const changeCaseActionName = (str) => {
  if (str) {
    return str.split(',').map((item, index) => `${index + 1}. ${item}`).join("；")
  } else {
    return ''
  }
}
//查看文件
const viewFile = async (url) => {
  router.push({
    name: 'fileDetail',
    query: {
      url: url,
    },
  })
}

const gotoTaskDetail = () => {
  router.push({ name: 'detailSuperviseTasktwo', query: { id: detailForm.value.taskId } })
}
onMounted(async () => {
  if (id.value != '') {
    const res = await useRegister.caseDetail(id.value)
    if (res.code == 0) {
      detailForm.value = res.data
      if (res.data.registerList.length) {
        res.data.registerList.forEach((item, index) => {
          if (item.nodeStatus == 2) {
            active2.value++
          }
        })
      }

      console.log(active2.value)
    }
  }
})
</script>
<style lang="scss" scoped>
.detailTask {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: #f7f7f7;

  .detail {
    width: 100%;
    height: calc(100% - 46px);
    overflow-y: auto;
    margin-top: 46px;

    .infoBox {
      background-color: #ffffff;
      margin: 10px 8px;
      border-radius: 8px;

      .title {
        padding: 16px 12px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        .title-left {
          display: flex;
          align-items: center;

          .titleIcon {
            width: 4px;
            height: 14px;
            background: linear-gradient(180deg, #5688f5 0%, #1764ce 100%);
            border-radius: 20px;
            margin-right: 8px;
          }
        }

        .title-right {
          padding: 5px 12px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          color: #1764ce;
          background-color: rgba(23, 100, 206, 0.1);
          border-radius: 4px;
        }
      }

      .info {
        padding: 16px 12px;

        .infoItem {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .ws-left {
            display: flex;
            align-items: center;
            color: #2b2b2b;
            font-size: 15px;
            font-weight: 500;

            img {
              width: 36px;
              height: 36px;
            }
          }

          .ws-right {
            min-width: 50px;
            color: #1764ce;
            font-size: 14px;
            font-weight: 400;
          }

          .left {
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #8c8c8c;
            min-width: 80px;
            margin-right: 20px;
          }

          .right {
            width: 1px;
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: #2b2b2b;
            text-align: right;
            flex: 1;
            word-wrap: break-word;
            /* 设置自动换行 */
          }

          .right1 {
            color: #1764ce;
          }
        }

        .infoItem:last-child {
          margin-bottom: 0;
        }

        .danger {
          margin-bottom: 12px;
        }

        .danger:last-child {
          margin-bottom: 0;
        }
      }

      .result {
        padding: 16px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        .result-title {
          // width: 140px;
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 24px;
          color: #4d4d4d;
        }
      }
    }
  }
}

.setpBox {
  background-color: #ffffff;
  border-radius: 4px;

  .setpBox-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid #f5f5f5;

    .title1 {
      font-size: 17px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 24px;
      color: #4d4d4d;
    }

    .tag1 {
      padding: 5px 8px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20px;
    }
  }

  .setpBox-con {
    padding: 16px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .topName {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 24px;
        color: #2b2b2b;
      }

      .topTime {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20px;
        color: #8c8c8c;
      }
    }

    .bot {
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 21px;
      color: #8c8c8c;
      word-break: break-all;
    }
  }
}

.empty {
  // height: 100%;
  // position: absolute;
  // left: 50%;
  // top: 50%;
  // transform: translate(-50%, -50%);
  margin-top: 50%;
  text-align: center;

  >img {
    width: 128px;
    height: 96px;
  }

  >div {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: rgba(153, 153, 153, 1);
  }
}

.green {
  background-color: rgba(2, 173, 130, 0.1);
  color: #02ad82;
}

.orige {
  background-color: rgba(252, 119, 10, 0.1);
  color: #fc770a;
}

.red {
  background-color: rgba(255, 77, 77, 0.1);
  color: #ff4d4d;
}
</style>